<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
    <link rel="stylesheet" href="css/index.min.css">
    <script>
        if (document.documentElement.clientWidth > 490) {
            document.documentElement.style.fontSize = '10px';
        } else {
            document.documentElement.style.fontSize = document.documentElement.clientWidth / 37.5 + 'px';
        }
    </script>
</head>

<body>
    <div class="container">
        <div class="top-warrper">
            <h1 class="title">Kangsayur</h1>
            <div class="search-bar">
                <i class="me-search"></i>
                <input type="text" placeholder="搜索蔬菜、水果...">
                <i class="me-email"></i>
                <i class="me-info active"></i>
            </div>
            <div class="serch-bottom-bar">
                <i class="me-position"></i>
                <span>发送到</span>
                <i class="me-down"></i>
            </div>
            <div class="slider-warrper">
                <div id="back_swiper" class="banner-warrper">
                    <div class="box">
                        <div class="left">
                            <div>
                                <p p-text="折扣" class="z-txt">折扣</p>
                                <h1 percent="25%" class="percent">25%</h1>
                            </div>
                            <p>所有水果和蔬菜</p>
                            <a href="#">
                                <p>了解更多</p>
                            </a>
                        </div>
                        <div class="right">
                            <div class="img-box">
                                <img src="./img/product/t1.png" alt="goods">
                            </div>
                        </div>
                    </div>
                    <div class="box">
                        <div class="left">
                            <div>
                                <p p-text="折扣" class="z-txt">折扣</p>
                                <h1 percent="25%" class="percent">31%</h1>
                            </div>
                            <p>所有水果和蔬菜</p>
                            <a href="#">
                                <p>了解更多</p>
                            </a>
                        </div>
                        <div class="right">
                            <div class="img-box">
                                <img src="./img/product/t1.png" alt="goods">
                            </div>
                        </div>
                    </div>
                    <div class="box">
                        <div class="left">
                            <div>
                                <p class="z-txt">折扣</p>
                                <h1 class="percent">35%</h1>
                            </div>
                            <p>所有水果和蔬菜</p>
                            <a href="#">
                                <p>了解更多</p>
                            </a>
                        </div>
                        <div class="right">
                            <div class="img-box">
                                <img src="./img/product/t1.png" alt="goods">
                            </div>
                        </div>
                    </div>
                    <div class="box">
                        <div class="left">
                            <div>
                                <p class="z-txt">折扣</p>
                                <h1 class="percent">45%</h1>
                            </div>
                            <p>所有水果和蔬菜</p>
                            <a href="#">
                                <p>了解更多</p>
                            </a>
                        </div>
                        <div class="right">
                            <div class="img-box">
                                <img src="./img/product/t1.png" alt="goods">
                            </div>
                        </div>
                    </div>
                    <div class="box">
                        <div class="left">
                            <div>
                                <p class="z-txt">折扣</p>
                                <h1 class="percent">55%</h1>
                            </div>
                            <p>所有水果和蔬菜</p>
                            <a href="#">
                                <p>了解更多</p>
                            </a>
                        </div>
                        <div class="right">
                            <div class="img-box">
                                <img src="./img/product/t1.png" alt="goods">
                            </div>
                        </div>
                    </div>
                </div>
                <ul id="back_swiper_tag">
                    <li class="active"></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
            </div>
        </div>

        <div class="context-warrper">
            <div class="me-type">
                <h2>分类</h2>
                <div class="box">
                    <div class="img-box">
                        <a href="#"><img src="./img/product/c1.png" alt="goods"></a>
                    </div>
                    <p>蔬菜</p>
                </div>
                <div class="box">
                    <div class="img-box">
                        <a href="#"><img src="./img/product/c2.png" alt="goods"></a>
                    </div>
                    <p>水果</p>
                </div>
                <div class="box">
                    <div class="img-box">
                        <a href="#"><img src="./img/product/c3.png" alt="goods"></a>
                    </div>
                    <p>肉类</p>
                </div>
                <div class="box">
                    <div class="img-box">
                        <a href="#"><img src="./img/product/c4.png" alt="goods"></a>
                    </div>
                    <p>牛奶</p>
                </div>
                <div class="box">
                    <div class="img-box">
                        <a href="#"><img src="./img/product/c5.png" alt="goods"></a>
                    </div>
                    <p>饼干</p>
                </div>
            </div>
            <div class="me-share">
                <div class="top">
                    <h2>分享</h2>
                    <p>更多</p>
                </div>
                <div class="box">
                    <div class="img-box">
                        <a href="#"><img src="./img/product/b1.png" alt="goods"></a>
                    </div>
                </div>
                <div class="box">
                    <div class="img-box">
                        <a href="#"><img src="./img/product/b2.png" alt="goods"></a>
                    </div>
                </div>
                <div class="box">
                    <div class="img-box">
                        <a href="#"><img src="./img/product/b3.png" alt="goods"></a>
                    </div>
                </div>
            </div>
        </div>

        <div class="bottom-bar">
            <ul>
                <li class="active">
                    <svg t="1649787664416" class="home active" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="1258" width="28" height="28">
                        <path class="house"
                            d="M923.733333 394.666667c-85.333333-70.4-206.933333-174.933333-362.666666-309.333334C533.333333 61.866667 490.666667 61.866667 462.933333 85.333333c-155.733333 134.4-277.333333 238.933333-362.666666 309.333334-14.933333 14.933333-25.6 34.133333-25.6 53.333333 0 38.4 32 70.4 70.4 70.4H192v358.4c0 29.866667 23.466667 53.333333 53.333333 53.333333H405.333333c29.866667 0 53.333333-23.466667 53.333334-53.333333v-206.933333h106.666666v206.933333c0 29.866667 23.466667 53.333333 53.333334 53.333333h160c29.866667 0 53.333333-23.466667 53.333333-53.333333V518.4h46.933333c38.4 0 70.4-32 70.4-70.4 0-21.333333-10.666667-40.533333-25.6-53.333333z m-44.8 59.733333h-57.6c-29.866667 0-53.333333 23.466667-53.333333 53.333333v358.4h-138.666667V661.333333c0-29.866667-23.466667-53.333333-53.333333-53.333333h-128c-29.866667 0-53.333333 23.466667-53.333333 53.333333v206.933334H256V507.733333c0-29.866667-23.466667-53.333333-53.333333-53.333333H145.066667c-4.266667 0-6.4-2.133333-6.4-6.4 0-2.133333 2.133333-4.266667 2.133333-6.4 85.333333-70.4 206.933333-174.933333 362.666667-309.333333 4.266667-4.266667 10.666667-4.266667 14.933333 0 155.733333 134.4 277.333333 238.933333 362.666667 309.333333 2.133333 2.133333 2.133333 2.133333 2.133333 4.266667 2.133333 6.4-2.133333 8.533333-4.266667 8.533333z"
                            p-id="1259"></path>
                    </svg>
                </li>
                <li>
                    <svg t="1649787757740" class="like" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="2739" width="28" height="28">
                        <path class="heart"
                            d="M510.68 883.15c-15.2 0-30.37-8.49-48.1-25.47-25.35-24.3-50.81-48.48-76.27-72.64-61.6-58.49-125.28-118.96-186.38-180.25-68.39-68.6-99.26-141.23-94.39-222.07 4.09-67.79 31.08-122.65 78.06-158.66 50.62-38.79 123.3-53.23 194.46-38.6 51.71 10.63 90 41.18 127.03 70.72l1.54 1.23c0.47 0.38 0.94 0.76 1.41 1.13 8.05-5.05 15.94-10.15 23.68-15.13 30.01-19.35 58.34-37.63 90.38-50.54 84.26-33.9 189.34-8.11 244.51 60.07 58.08 71.79 68.23 157.45 28.57 241.22-20 42.22-50.67 84.68-91.16 126.22-57.91 59.41-118.94 117.32-177.96 173.33-22.3 21.16-44.59 42.32-66.77 63.59-17.98 17.22-33.31 25.85-48.61 25.85zM322.91 235.07c-40.08 0-77.72 11.4-105.7 32.85-34.37 26.34-53.38 66.08-56.52 118.12-3.92 65.06 20.98 122.17 78.37 179.73 60.56 60.74 123.97 120.95 185.3 179.18 25.52 24.23 51.04 48.47 76.45 72.82 4.78 4.57 7.91 7.21 9.9 8.73 2.06-1.55 5.31-4.3 10.31-9.09 22.25-21.35 44.61-42.57 66.98-63.8 58.64-55.64 119.28-113.19 176.44-171.82 36.23-37.15 63.39-74.6 80.77-111.3 30.5-64.42 23.05-127.64-21.58-182.8-39.86-49.23-119.33-68.36-180.89-43.55-27.16 10.93-53.36 27.83-81.09 45.71-13.56 8.74-27.59 17.79-42.49 26.65l-17.29 10.29-18.13-16.06c-2.81-2.58-7.07-6.51-11.59-10.12l-1.54-1.22c-33.41-26.65-64.96-51.83-103.69-59.79a217.005 217.005 0 0 0-44.01-4.53z"
                            p-id="2740"></path>
                    </svg>
                </li>
                <li class="active">
                    <svg t="1649787815928" class="shoop" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="3542" width="28" height="28">
                        <path class="top"
                            d="M940.8 284.8c-16-19.2-38.4-28.8-64-28.8H352c-19.2 0-32 12.8-32 32s12.8 32 32 32h524.8c6.4 0 12.8 3.2 16 6.4 3.2 3.2 6.4 9.6 3.2 19.2l-48 336c0 9.6-12.8 19.2-25.6 19.2h-38.4-3.2-444.8c-12.8 0-25.6-16-25.6-28.8L256 300.8l-28.8-156.8C220.8 99.2 182.4 64 134.4 64H96c-19.2 0-32 16-32 32s12.8 32 32 32h38.4c12.8 0 25.6 9.6 28.8 25.6L192 310.4l51.2 371.2C249.6 729.6 288 768 332.8 768h486.4c44.8 0 83.2-32 89.6-73.6L960 355.2c3.2-25.6-3.2-51.2-19.2-70.4z"
                            p-id="3543"></path>
                        <path class="circle1" d="M323.2 896m-64 0a64 64 0 1 0 128 0 64 64 0 1 0-128 0Z" p-id="3544">
                        </path>
                        <path class="circle2" d="M832 896m-64 0a64 64 0 1 0 128 0 64 64 0 1 0-128 0Z" p-id="3545">
                        </path>
                    </svg>
                </li>
                <li>
                    <svg t="1649787848780" class="user" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="4333" width="28" height="28">
                        <path class="header"
                            d="M858.5 763.6c-18.9-44.8-46.1-85-80.6-119.5-34.5-34.5-74.7-61.6-119.5-80.6-0.4-0.2-0.8-0.3-1.2-0.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-0.4 0.2-0.8 0.3-1.2 0.5-44.8 18.9-85 46-119.5 80.6-34.5 34.5-61.6 74.7-80.6 119.5C146.9 807.5 137 854 136 901.8c-0.1 4.5 3.5 8.2 8 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c0.1 4.4 3.6 7.8 8 7.8h60c4.5 0 8.1-3.7 8-8.2-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"
                            p-id="4334"></path>
                    </svg>
                </li>
            </ul>
        </div>
    </div>
    <script src="./js/index.js"></script>
    <script src="./js/bSlider.min.js"></script>

    <script>
        bSlider.setOption({
            sliderIoC: document.getElementById('back_swiper'),
            sliderTagIoC: document.getElementById('back_swiper_tag'),
            spacing: 24,
            proportion: 4
        }).init();
    </script>
</body>

</html>